<template>
    <van-steps direction="vertical" :active="0">
        <van-step v-for="tEvent in track.events" :key="tEvent.occurredTime">
            <h3>{{tEvent.message}}</h3>
            <p>{{tEvent.occurredTime}}</p>
        </van-step>
    </van-steps>
</template>

<script>
  import { message, shipping } from "@mall/api-services"
  import { Step, Steps, Toast } from "vant"
  import * as _ from "lodash"

  export default {
    name: "TrackingTimeline",
    components: {
      [Step.name]: Step,
      [Steps.name]: Steps,
    },
    props: {
      carrierCode: String,
      trackingNumber: String,
    },
    data() {
      return {
        track: new shipping.Track(),
      }
    },
    watch: {
      carrierCode() {
        this.refreshTracking()
      },
      trackingNumber() {
        this.refreshTracking()
      },
    },
    created() {
      this.refreshTracking()
    },
    methods: {
      refreshTracking() {
        const { carrierCode, trackingNumber } = this
        if (_.isUndefined(carrierCode) || _.isUndefined(trackingNumber)) {
          return
        }
        shipping.TrackingService
          .getTrack(carrierCode, trackingNumber)
          .then(track => this.track = track)
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
      },
    },
  }
</script>

<style lang="scss" scoped>
    h3 {
        margin: 0;
        font-weight: normal;
        font-size: inherit;
    }

    .van-step--vertical {
        &:after {
            border: none;
        }
    }
</style>
